<template>
	<div>
		<el-dialog title="添加" width="600px" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
			<el-form :size="size" ref="form" :model="form" :rules="rules" :label-width="$store.getters.device !== 'mobile'?'16%':'90px'">
				<el-row >
					<el-col :span="24">
						<el-form-item label="标题" prop="title">
							<el-input  v-model="form.title" autoComplete="off" clearable  placeholder="请输入标题"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="24">
						<el-form-item label="计数器" prop="jsq">
							<el-input-number controls-position="right" style="width:200px;" autoComplete="off" v-model="form.jsq" clearable :min="0" placeholder="计数器"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="24">
						<el-form-item label="标签" prop="tags">
							<Tag :tagList.sync="form.tags"></Tag>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="24">
						<el-form-item label="滑块" prop="hk">
							<el-slider v-model="form.hk"></el-slider>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="23">
						<el-form-item label="颜色选择器" prop="color">
							<el-input v-model="form.color" autoComplete="off" clearable placeholder="请输入颜色选择器"/>
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<el-color-picker size="small" v-model="form.color" show-alpha></el-color-picker>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="24">
						<el-form-item label="键值对" prop="jzd">
							<draggable v-model="form.jzd" v-bind="{group:'item'}" handle=".jzd-handle">
							<el-row v-for="(item,i) in form.jzd" :key="i">
								<el-col :span="10">
									<el-form-item class="activeItem">
										<el-input  v-model="item.key" placeholder="选项名称"/>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item class="activeItem">
										<el-input style="position:relative;left:5px;" v-model="item.val" placeholder="选项值"/>
									</el-form-item>
								</el-col>
								<el-col :span="4">
									<el-button type="danger" size="mini" style="position:relative;left:15px"  icon="el-icon-close" @click="deleteItem('jzd',i)"></el-button>
									<el-button class="jzd-handle" type="success" size="mini" style="position:relative;left:15px" icon="el-icon-rank"></el-button>
								</el-col>
							</el-row>
							</draggable>
							<div>
								<el-button type="info" icon="el-icon-plus" style="padding:5px 7px" size="mini" @click="addItem('jzd')">追加</el-button>
								<el-button v-if="form.jzd.length > 0" type="warning" icon="el-icon-delete" style="padding:5px 7px" size="mini" @click="clearItem('jzd')">清空</el-button>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="24">
						<el-form-item label="省市区联动" prop="ssq">
							<el-cascader style="width:100%" clearable v-model="form.ssq" :options="threeAddressOptions"></el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" :loading="loading" type="primary" @click="submit" >
					<span v-if="!loading">确 定</span>
					<span v-else>提 交 中...</span>
				</el-button>
				<el-button :size="size" @click="closeForm">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { add  } from '@/api/admin/other'
import draggable from "vuedraggable"
import Tag from '@/components/common/Tag.vue'
import threeAddressOptions from '@/utils/city-data-level3.js'
export default {
	name:'otheradd',
	components: {
		draggable,
		Tag,
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: 'small'
		},
	},
	data(){
		return {
			form: {
				title:'',
				tags:[],
				color:'',
				jzd:[{}],
				ssq:[],
			},
			threeAddressOptions:threeAddressOptions,
			loading:false,
			rules: {
			}
		}
	},
	methods: {
		open(){
		},
		submit(){
			this.$refs['form'].validate(valid => {
				if(valid) {
					this.loading = true
					add(this.form).then(res => {
						if(res.status == 200){
							this.$message({message: '操作成功', type: 'success'})
							this.$emit('refesh_list')
							this.closeForm()
						}
					}).catch(()=>{
						this.loading = false
					})
				}
			})
		},
		addItem(key){
			this.form[key].push({})
		},
		deleteItem(key,index){
			this.form[key].splice(index,1)
		},
		clearItem(key){
			this.form[key] = []
		},
		closeForm(){
			this.$emit('update:show', false)
			this.loading = false
			if (this.$refs['form']!==undefined) {
				this.$refs['form'].resetFields()
			}
			this.form.hk = 0
			this.form.jzd = [{}]
		},
	}
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss'
</style>
